<div class="list-body">

	<ul id="device-info" class="nav nav-tabs">
	   <li class="active"><a href="#device-basic-info" data-toggle="tab">设备信息</a>
	   </li>
	   <li><a href="#device-data" onclick="data_click()" data-toggle="tab">设备数据</a></li>
	   <li><a href="#device-config" onclick="config_click()" data-toggle="tab">设备配置</a></li>
	   <li><a href="#device-log" onclick="log_click()" data-toggle="tab">设备日志</a></li>
	</ul>
<div id="device-info-content" class="tab-content" style="height: 92%;">
   <div class="tab-pane fade in active" id="device-basic-info">
      	<div class="info-main mt-10">
	        <div class="info-left bfz-12">
	      		<span><i class="fa fa-desktop"></i></span>
	        </div>
	        <div class="info-right bfz-88">
	        	<div class="top">
					<p class="fw-600"><span>SN：</span><span class="deviceSn"></span></p>
	        		<p><span>设备名称：</span><span class="device-name"></span></p>
	        	</div>
	        	<div class="bottom">
	        		<p><span>业务名称：</span><span class="device-business"></span></p>
	        		<p><span>IMSI：</span><span class="device-imsi"></span></p>
	        		<p><span>IMEI：</span><span class="device-imei"></span></p>
	        		<!-- <p><span>SIM：</span><span class="device-sim"></span></p> -->
	        		<p><span>位置：</span><span class="device-location"></span></p>
	        		<p><span>坐标：</span><span class="device-coordinate"></span></p>
	        		<p><span>入网方式：</span><span class="device-netway"></span></p>
	        		<!-- <p><span>通信协议：</span><span class="device-communicationprotocol"></span></p>
	        		<p><span>是否解析KTV：</span><span class="device-parsektv"></span></p> -->
	        		<p style=" display: inline-flex;"><span>设备描述：</span><span class="device-info text-change-line" style="width: 90%;"></span></p>
	        	</div>
	        </div>
      	</div>
   </div>
   <div class="tab-pane fade"  id="device-data"  >
   	<form data-toggle="ajaxsearch" data-options="{searchDatagrid:$.CurrentNavtab.find('#data-table')}">
		 	<div class="row">
	            <div class="search-input">
		            <span class="position-relative">
		                <input type="text" name="createdate" id="dataDate" style="width: 240px">
		                <a class="date-icon dateIcon"><i class="fa fa-calendar"></i></a>
		            </span>
		            <button type="submit" class="search-btn" data-icon="search"></button>
	            </div>
				
			</div>
		</form>
		<div class="row"  style="height:600px;" >
	       	<table id="data-table" class="table table-bordered">
			</table>
		</div>
   </div>
   <div class="tab-pane fade"  id="device-config"  >
		<form data-toggle="ajaxsearch" data-options="{searchDatagrid:$.CurrentNavtab.find('#config-table')}">
		 	<div class="row">
            <div class="search-input">
	            <span class="position-relative">
	                <input type="text" name="createdate" id="configDate" style="width: 240px">
	                <a class="date-icon configIcon"><i class="fa fa-calendar"></i></a>
	            </span>
	            <button type="submit" class="search-btn" data-icon="search"></button>
            </div>
			
			</div>
		</form>
		<div class="row" style="height:600px;" >
	       	<table id="config-table" class="table table-bordered">
			</table>
		</div>
   </div>
	<div class="tab-pane fade"  id="device-log">
		<form data-toggle="ajaxsearch" data-options="{searchDatagrid:$.CurrentNavtab.find('#data-log')}">
		 	<div class="row">
	            <div class="search-input">
		            <span class="position-relative">
		                <input type="text" name="createdate" id="logDate" style="width: 240px">
		                <a class="date-icon logIcon"><i class="fa fa-calendar"></i></a>
		            </span>
		            <button type="submit" class="search-btn" data-icon="search"></button>
	            </div>
				
			</div>
		</form>
		<div class="row"  style="height:600px;" >
	       	<table id="data-log" class="table table-bordered">
			</table>
		</div>
   </div>
</div>
</div>


<script type="text/javascript">
	$(function(){
		var datepickerdata={
	        dateFormat: "yy-mm-dd",
	        dayNamesMin: [ "日", "一", "二", "三", "四", "五", "六" ],
	        monthNames: [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ],
	        changeYear: true
    	}
		var sn="{{deviceSn}}";

    	 $("#dataDate").jeDate({
    	 	isinitVal:true,
          trigger: "click focus",
          format: "YYYY-MM"
      });
      $('.dateIcon').click(function () {
        $('#dataDate').focus();
      })
	
		 $("#logDate").jeDate({
		 	isinitVal:true,
          trigger: "click focus",
          format: "YYYY-MM"
      });
      $('.logIcon').click(function () {
        $('#logDate').focus();
      })
		
	  $("#configDate").jeDate({
	  	isinitVal:true,
         trigger: "click focus",
         format: "YYYY-MM"
      });
      $('.configIcon').click(function () {
        $('#configDate').focus();
      })

		$.ajax({
	        url:"/devices/getDeviceInfo",
	        type:"post",
	        data:{"sn":sn},
	        dataType:"JSON",
	        success:function(data){
	        	data=data.data;
	            $(".deviceSn").text(data.sn);
	            $(".device-name").text(data.name);
	            $(".device-business").text( data.business); 
	            $(".device-imsi").text(data.imsi);
	            $(".device-imei").text(data.imei);
	            $(".device-sim").text(data.sim);
	            $(".device-location").text(data.location);
	            $(".device-netway").text(data.netway); 
	            $(".device-coordinate").text(data.coordinate); 
	            $(".device-privateprotocol").text( data.privateprotocol);
	            $(".device-info").text(data.info);
	        }
	    })
	    get_data();
	    get_config();
	    get_log();
	    
	})
	function see_data(obj){
		BJUI.dialog({
			id:'deviceData',
			url:'/devices/datalist/detailsPage',
			title:"设备数据详情",
			type:"post",
			data:{'metadata':obj.metadata,'privatedata':JSON.stringify(obj.privatedata)},
			width:"1500",
			height:"800",
			mask:true,
			maxable:false

		})
	}
	function data_click(){
		get_data();
	}
	function get_data(){
		var sn="{{deviceSn}}";
		$('#data-table').datagrid({
		    height:'100%',
		    width:'100%',
			tableWidth:'100%',
			columnResize:false,
			// fieldSortable:false,
			gridTitle:'数据',
			postData:{"name":sn},
			filterThead : false,
			 filterMult:false,
			local:'remote',
		    dataUrl: '/devices/datalist',
		    columns:[
		        {
		        	name: 'meta-data',
		            label: '原始数据',
		            align: 'center',
                    quicksort:false,
		            menu:false,
		            width: 80,
		            render:function(value,data){
		            	return '<p class="text-ellipsis">'+data.metadata+'</p>'
		            }
		        },
		        {
		        	name: 'createdate',
		            label: '接收数据时间',
		            align: 'center',
		            menu:false,
		            width: 60
		   		},
		   		{
		        	name: 'operation',
		            label: '操作',
		            align: 'center',
                    quicksort:false,
		            menu:false,
		            width: 40,
		            render:function(value,data){
		            	return "<div><a title='查看数据' onclick='see_data("+JSON.stringify(data)+")' class='label label-success'><i class='fa fa-eye'></i></a></div>"
		            }
		   		}
			   		
		    ],
		    paging:{pageSize:10,pageCurrent:1},
			showLinenumber:false
		})
		var dd=$('datagrid-wrap-h').width();
	}
	function config_click(){
		get_config();
	}
	function get_config(){
		var sn="{{deviceSn}}";
		$('#config-table').datagrid({
		    height:'100%',
		    width:'100%',
		    fieldSortable:false,
		    columnResize:false,
			tableWidth:'100%',
			gridTitle:'配置',
			postData:{"name":sn},
			filterThead : false,
			local:'remote',
		    dataUrl: '/devices/configList',
		    columns:[
		        {
		        	name: 'configid',
		            label: '配置编号',
		            align: 'center',
		            menu:false,
                    quicksort:false,
		            width: 80
		            
		        },
		        {
		        	name: 'configtype',
		            label: '配置类型',
		            align: 'center',
		            menu:false,
                    quicksort:false,
		            width: 60
		   		}, 
		        {
		        	name: 'timeservice',
		            label: '是否授时',
		            align: 'center',
                    quicksort:false,
		            menu:false,
		            width: 60
		            
		   		},
		        {
		        	name: 'configdata',
		            label: '配置数据',
		            align: 'center',
		            menu:false,
		            quicksort:false,
		            width: 60
		   		},
		   		{
		        	name: 'status',
		            label: '状态',
		            align: 'center',
		            menu:false,
		            quicksort:false,
		            width: 60
		   		},
		   		{
		        	name: 'createdate',
		            label: '配置时间',
		            align: 'center',
		            menu:false,
		            quicksort:false,
		            width: 60
		   		},
			   		
		    ],
		    paging:{pageSize:10,pageCurrent:1},
			showLinenumber:false
		})
	}
	function log_click(){
		
		get_log();
	}
	function get_log(){
		
		var sn="{{deviceSn}}";
		$('#data-log').datagrid({
		    height:'100%',
		    width:'100%',
			tableWidth:'100%',
			// fieldSortable:false,
			gridTitle:'日志',
			postData:{"name":sn},
			filterThead : false,
			columnResize:false,
			filterMult:false,
			local:'remote',
		    dataUrl: '/devices/logList',
		    columns:[
		        {
		        	name: 'log',
		            label: '日志内容',
		            align: 'center',
		            menu:false,
                    quicksort:false,
		            width: 80
		            
		        },
		        {
		        	name: 'createdate',
		            label: '接收数据时间',
		            align: 'center',
		            menu:false,
		            width: 60

		   		}
			   		
		    ],
		    paging:{pageSize:10,pageCurrent:1},
			showLinenumber:false
		})
	}
</script>

